<template>
    <div class="box">
        <button @click="jian(item)" v-show="item.count > 0" class="btn btn1"  > - </button>
        <p class="num" v-show="item.count > 0" >{{item.count}}</p>
        <button @click="add(item)" class="btn btn2">+</button>
    </div>
</template>

<script>
    export default {
        props:["item",'type'],
        data() {
            return {
                num:0
            }
        },
        methods:{
            add(food){
                if(!food.count){
                    food.count = 1
                }else{
                    food.count++
                }
                this.$store.commit("setCarList",{
                    item: food
                })
            },
            jian(food){
                    food.count--
            }    
        }
}
</script>

<style lang="less" scoped>
    .box{
        width: 80px;
        height: 25px;
        position: relative;
        right: 10px;
        top: 70px;
        line-height: 0px;
        .num{
            position: absolute;
            top: 10px;
            left: 35px;            
        }

        .btn{
                                width: 20px;
                                height: 20px;
                                border-radius: 10px;
                                border: 2px solid #00A0DC;
                                background-color: #fff;
                                line-height: 16px;
                                text-indent: -2px;
                                color: #00A0DC;

                            }
                            .btn1{
                                float: left;
                            }
                            .btn2{
                                float: right;
                                margin-left: 15px;
                                
                            }
                            
    }
</style>